<template>
    <Modal v-model="status"
           title="新增/修改用户"
           @on-ok="handleSubmit">
        <div class="m-content">
            <Form ref="myData" :label-width="100" style="width: 900px"
                  :inline="true">
                <FormItem label="用户名:" prop="posts_title">
                    <Input type="text" v-model="username" placeholder="请输入..." />
                </FormItem>
                <br>
                <FormItem label="昵称:" prop="posts_title">
                    <Input type="text"  v-model="nickname" placeholder="请输入..." />
                </FormItem>
                <br>
                <FormItem>
                    <div>创建用户的时候  密码默认为：<strong>Qwe!123qwe</strong></div>
                </FormItem>
                <br>
                <!--<FormItem>-->
                    <!--<Button type="primary" @click="handleSubmit()">提交</Button>-->
                <!--</FormItem>-->
            </Form>
        </div>
    </Modal>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'

    export default {
        props: ['editStatus','userId'],
        data() {
            return {
                username: '',
                nickname: '',
                typeData: []
            }
        },
        methods: {
            notifyArticle(){
                if (!this.username) {
                    this.$Message.error('请请输入用户名');
                    return;
                }
                let formData = new FormData();
                formData.append('username', this.username);
                formData.append('nickname', this.nickname);
                formData.append('id', this.userId);
                this.axios.post(API.USER_UPDATE, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('更新成功！');
                        this.close();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            saveContentInfo() {
                let vm = this;
                if (!this.username){
                    this.$Message.error('请请输入用户名');
                    return ;
                }
                let formData = new FormData();
                formData.append('username', this.username);
                formData.append('nickname', this.nickname);
                this.axios.post(API.USER_ADD, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('创建成功！');
                        this.close();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            handleSubmit() {
                if (this.userId){
                    this.notifyArticle();
                } else {
                    this.saveContentInfo();
                }
            },
            close() {
                this.$emit('closeModal')
            },
            getArticle(){
                let data = {
                    id: this.userId
                }
                this.axios.post(API.USER_INFO, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        let netData = data.data;
                        this.username = netData.username;
                        this.nickname = netData.nickname;
                    }
                })
            },
            getImages(id){

            }
        },
        computed: {
            myData() {
                // let vm = this;
                // if (vm.editData.posts_id) {
                //     vm.posts_content = vm.editData.posts_content;
                // }
                // if (vm.editData.posts_type != 'undefined' && vm.editData.posts_type != undefined) {
                //     vm.posts_type = vm.editData.posts_type+"";
                // }
                // return this.editData;
            }
        },
        watch: {
            'editStatus': function (val) {
                if (val && this.userId){
                    this.getArticle()
                }
            }
        },
        computed:{
          status () {
              return this.editStatus
          }
        },
        created() {
            if (this.userId){
                this.getArticle()
            }
        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }

    }
</style>
